<template>
  <div>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane :label="item.name" :name="item.id" v-for="item in tabList" :key="item.id"></el-tab-pane>
    </el-tabs>
    <div class="hearder-search">
      <div class="toplineBox mb-10">
        <div class="toplineBox-left">
          <el-input v-model="editForm.name" placeholder="填写工作名称" size="small" class="w-140 mr-10"></el-input>
          <el-button type="primary" size="small" @click="searchFn"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
          <el-button type="primary" size="small" @click="detailVisible=true" plain><i class="el-icon-plus"></i>发布互动工作
          </el-button>
        </div>
        <p class="numberline toplineBox-right">总{{ page.total }}条</p>
      </div>
    </div>
    <div class="table-body">
      <div class="table-body-box">
        <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c">
          <el-table-column
              prop="id"
              label="ID"
              width="90"
              :key="1">
          </el-table-column>
          <el-table-column
              prop="name"
              label="互动工作名"
              :key="2">
          </el-table-column>
          <el-table-column
              label="发布人"
              width="100"
              :key="3">
            <template slot-scope="scope">
              {{ scope.row.user.realname }}
            </template>
          </el-table-column>
          <el-table-column
              prop="create_time"
              label="发布时间"
              width="120"
              :key="4">
          </el-table-column>
          <el-table-column
              prop="end_time"
              label="限改时间"
              width="120"
              :key="5">
            <template slot-scope="scope">
              <div class="timeToday">
                {{ scope.row.end_time }}
              </div>
              <el-tag type="danger" size="mini" v-if="Number(activeName)==1 && scope.row.user_status!=='完成' && scope.row.userStatusTxt">{{scope.row.userStatusTxt.title}}</el-tag>
              <el-tag type="danger" size="mini" v-if="Number(activeName)==2 && scope.row.itemStatus">{{scope.row.itemStatus.title}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              label="互动状态"
              width="120"
              v-if="Number(activeName)==1"
              :key="6">
            <template slot-scope="scope">
              <el-link type="success" v-if="scope.row.user_status=='完成'">{{ scope.row.user_status }}</el-link>
              <el-link type="danger" v-else>{{ scope.row.user_status }}</el-link>
            </template>
          </el-table-column>
          <el-table-column
              label="总人/完成/未处理"
              width="180"
              v-if="Number(activeName)==2"
              :key="7">
            <template slot-scope="scope">
              {{ scope.row.workuser.length }}
              ,
              <el-popover
                  placement="left-start"
                  :title="`完成人员(${scope.row.ok_user.length})`"
                  width="160"
                  trigger="hover">
                <div class="tableline">
                  <div v-for="(item,index) in scope.row.ok_user">
                    <div class="list-s">
                      {{index+1}}.{{ item.user.realname }}
                    </div>
                  </div>
                </div>
                <el-link type="success" slot="reference">完成:{{ scope.row.numberStatus[0] }}</el-link>
              </el-popover>
              ,
              <el-popover
                  placement="right-start"
                  v-if="scope.row.not_user.length"
                  :title="`未处理人员(${scope.row.not_user.length})`"
                  width="160"
                  trigger="hover">
                <div class="tableline">
                  <div v-for="(item,index) in scope.row.not_user">
                    <div class="list-s">
                      {{index+1}}.<span class="user-list-name">{{ item.user.realname }}</span><el-tag type="danger" size="mini">{{scope.row.userStatusTxt.title}}</el-tag>
                    </div>
                  </div>
                </div>
                <el-link type="danger" slot="reference">未处理:{{ scope.row.numberStatus[1] }}</el-link>
              </el-popover>
              <el-link v-else type="danger">未处理:{{ scope.row.numberStatus[1] }}</el-link>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="180"
              :key="8">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="workId=scope.row.id,interactDetailVisible=true" plain>任务详情
              </el-button>
              <!--              发布者总管理可删除-->
              <el-button type="danger" size="small" @click="handleDetel(scope.row.id)" plain v-if="activeName=='2'">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--工具条 分页-->
    <el-col :span="24" class="toolbar">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
      </el-pagination>
    </el-col>
    <addWorke :visible.sync="detailVisible" :workId="workId"></addWorke>
    <interaction :visible.sync="interactDetailVisible" :workId="workId" :acticveWorke="activeName"
                 @InitFn="InitFn"></interaction>
  </div>
</template>

<script>
import {pagination, tableoption, yearDayLine} from '@/utils/util.js'
import addWorke from "./components/add-detail-worke";
import interaction from "./components/interaction-detail"
import {mapGetters} from "vuex";
import {interactionIndex, interactionDelete} from '@/api/admin/interaction.js'

export default {
  components: {
    addWorke,
    interaction
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    activeName() {
      this.arryList = []
      this.page.pageindex = 1
      this.InitFn()
    }
  },
  data() {
    return {
      interactDetailVisible: false,
      workId: 0,
      activeName: '1',
      tabList: [
        {
          name: '我的互动',
          id: '1',
        },
        {
          name: '我的抄送',
          id: '3',
        },
        {
          name: '我的发布',
          id: '2'
        }
      ],
      detailVisible: false,
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      taskId: 0,
      editForm: {
        name: '',
        p: 1,
        type: 1,// 类型1我的工作2我的发布
      },
      userInfomation: null,
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      console.log('用户信息：', this.userInfo)
      let option = this.getJson(this.editForm)
      option.p = this.page.pageindex
      option.type = this.activeName
      // let data = await this.$post(this.api.task.archives.index, this.editForm);
      interactionIndex(option).then(res => {
        for (let item of res.list.data) {

          item.create_time = item.create_time.split(' ')[0]
          let statusUserNumber = [0, 0]
          let ok_user = []
          let not_user = []
          for (let item_user of item.workuser) {
            if (Number(this.activeName) === 1 && Number(this.userInfo.id) === Number(item_user.user_id)) {
              item.user_status = item_user.is_end
            }
            if (Number(this.activeName) === 2) {
              if (item_user.is_end === '完成') {
                statusUserNumber[0] = statusUserNumber[0] + 1
                ok_user.push(item_user)
              } else {
                statusUserNumber[1] = statusUserNumber[1] + 1
                not_user.push(item_user)
              }
            }
          }
          item.ok_user = ok_user
          item.not_user = not_user
          item.itemStatus = '' // 任务状态
          item.userStatusTxt = this.dateFn(item.end_time) // 用户任务状态
          if(Number(this.activeName)===2 && (item.workuser.length !== ok_user.length)){
            item.itemStatus = this.dateFn(item.end_time)
            item.itemStatus.title = item.userStatusTxt.title
          }
          item.numberStatus = statusUserNumber
        }
        console.log('res.list.data:', res.list.data)
        this.arryList = res.list.data
        this.page.total = res.list.total
      })
    },
    getJson(item){
      return JSON.parse(JSON.stringify(item))
    },
    dateFn(endTime) {
      //建立一个功能
      let date1 = new Date(yearDayLine(new Date()));//建立新的Date对象用来获取当前的时间
      let date2 = new Date(endTime);//这里来输入你想查询的距离的时间，我这里设置的是
      let timeFn = this.chajuFn(date1, date2)
      if (timeFn) {
        if (timeFn === 'today') {
          return {type: 1, title: '今日到期'}
        } else {
          return {type: 2, title: `剩余${(date2 - date1) / (1000 * 60 * 60 * 24)}天`};
        }
      } else {
        return {type: 3, title: '超时'}
      }
    },
    chajuFn(date1, date2) {
      // date1 当前时间 date2开始时间
      let time1 = date1.getTime();//将日期转换成毫秒值
      let time2 = date2.getTime();
      if (time1 > time2) {
        return false;
      } else if (time1 === time2) {
        return 'today';
      } else {
        return time2 - time1;
      }
    },
    searchFn() {
      this.page.pageindex = 1
      this.InitFn()
    }
    ,
// 编辑 执行情况
    handleEdit(id) {
      this.taskId = id
      this.dialogDrawerVisible = true
    }
    ,
// 任务详情 数据获取
    taskDetail(id) {
      this.taskId = id
      this.detailVisible = true
    },
// 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.editForm.name = ''
      this.InitFn()
    },
// 设置默认选中
    checked(option) {
      if (option === 'first' && JSON.stringify(this.applyBookBox) !== '{}') {
        this.applyBookBox = {}
        this.$refs.table.clearSelection()
      }
      for (let i = 0; i < this.userList.length; i++) {
        if (this.applyBookBox[this.userList[i].id]) {
          this.$refs.table.toggleRowSelection(this.userList[i], true)
        }
      }
    }
    ,
// 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    }
    ,
// 刷新详情信息
    getUser() {
      this.taskDetail(this.editBox, 'refreshFn')
    }
    ,
// 弹窗
    checkTask() {

    },
    handleDetel(id) {
      this.$confirm('确认永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(id)
      }).catch(() => {
      })
    }
    ,
    detelRespon(id) {
      interactionDelete({id: id}).then(res => {
        if (!res.code) {
          this.$message(res.msg)
          this.InitFn()
        }
      })
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.evaluateBox {
  background: #eee;
  margin-top: 5px;
  border-radius: 4px;
  padding: 5px;
}

.lookLsit {
  cursor: pointer;
}

.lookLsit:hover {
  text-decoration: underline;
}

#tablebox {
  display: flex;
  flex-direction: column;
}

.el-table {
  color: #000;
}

.right-box .container .main .content-container .input-val-box .input-top {
  width: 250px;
}

.contentTitle {
  line-height: 1.3;
  max-height: 300px;
  overflow-y: auto;
  padding-top: 0px;

  img {
    width: 100%;
    margin: 5px 0
  }
}

.timeToday {

}
.tableline .list-s{
  padding:10px 0;
}
.tableline .list-s .user-list-name{
  margin-right: 5px;
}
</style>
